<template>
  <div class="model-card group relative">
    <div
      class="card bg-gradient-to-br from-base-200 to-base-300 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-3 hover:scale-[1.02] border border-base-content/5 overflow-hidden"
    >
      <!-- 背景装饰 -->
      <div
        class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
      ></div>

      <!-- 状态标签 -->
      <div class="model-card__badge absolute top-4 right-4 z-10">
        <div :class="['badge badge-lg gap-2 shadow-lg backdrop-blur-sm', statusClass]">
          {{ statusText }}
        </div>
      </div>

      <div class="card-body relative z-10">
        <!-- 图标和标题 -->
        <div class="flex items-start gap-4 mb-4">
          <div
            class="model-card__icon text-6xl drop-shadow-lg group-hover:scale-110 transition-transform"
          >
            {{ model.icon }}
          </div>
          <div class="flex-1">
            <h2 class="card-title text-xl mb-2 font-black">
              {{ model.name }}
            </h2>
            <div class="flex items-center gap-2 text-sm text-base-content/60">
              <PhCube :size="16" />
              <span class="font-medium">{{ model.provider }}</span>
            </div>
          </div>
        </div>

        <!-- 描述 -->
        <p class="text-base-content/70 text-sm mb-4 line-clamp-2">
          {{ model.description }}
        </p>

        <!-- 功能特性 -->
        <div class="model-card__features mb-4">
          <div class="text-xs font-semibold text-base-content/60 mb-2">✨ 核心功能</div>
          <ul class="space-y-1">
            <li
              v-for="(feature, index) in model.features.slice(0, 3)"
              :key="index"
              class="flex items-start gap-2 text-sm text-base-content/70"
            >
              <PhCheck :size="16" class="text-success mt-0.5 flex-shrink-0" />
              <span>{{ feature }}</span>
            </li>
          </ul>
        </div>

        <!-- 标签 -->
        <div class="model-card__tags flex flex-wrap gap-2 mb-4">
          <span v-for="tag in model.tags" :key="tag" class="badge badge-sm badge-outline">
            {{ tag }}
          </span>
        </div>

        <!-- 操作按钮 -->
        <div class="card-actions mt-2">
          <button
            :disabled="model.status === 'coming-soon'"
            class="btn btn-primary w-full gap-2 shadow-lg hover:shadow-xl hover:scale-[1.02] transition-all font-bold"
            @click="$emit('use', model)"
          >
            <PhRocket :size="18" />
            {{ model.status === 'coming-soon' ? '即将推出' : '进入使用' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { PhCube, PhCheck, PhRocket } from '@phosphor-icons/vue'

/**
 * Props 定义
 */
interface AIModel {
  id: string
  name: string
  provider: string
  description: string
  features: string[]
  category: string
  icon: string
  status: 'active' | 'beta' | 'coming-soon'
  pricing: {
    type: 'per-image' | 'per-token' | 'free'
    amount?: number
    unit?: string
  }
  capabilities: {
    streaming?: boolean
    batch?: boolean
    maxLength?: number
  }
  tags: string[]
}

const props = defineProps<{
  model: AIModel
}>()

/**
 * Emits 定义
 */
const emit = defineEmits<{
  use: [model: AIModel]
}>()

/**
 * 状态样式类
 */
const statusClass = computed(() => {
  switch (props.model.status) {
    case 'active':
      return 'badge-success'
    case 'beta':
      return 'badge-warning'
    case 'coming-soon':
      return 'badge-ghost'
    default:
      return 'badge-ghost'
  }
})

/**
 * 状态文本
 */
const statusText = computed(() => {
  switch (props.model.status) {
    case 'active':
      return '✓ 可用'
    case 'beta':
      return '⚡ 测试'
    case 'coming-soon':
      return '🚧 即将推出'
    default:
      return ''
  }
})
</script>

<style scoped lang="scss">
.model-card {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover::before {
    opacity: 1;
  }

  &__icon {
    animation: float 3s ease-in-out infinite;
  }

  &__badge {
    animation: fadeInDown 0.5s ease;
  }

  &__features {
    li {
      animation: fadeInLeft 0.5s ease backwards;

      @for $i from 1 through 3 {
        &:nth-child(#{$i}) {
          animation-delay: #{$i * 0.1}s;
        }
      }
    }
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
